

<template>
  <div class="points-application-container">
    <!-- 列表内容 -->
    <div class="application-list">
      <div 
        v-for="item in applicationList" 
        :key="item.indexCode"
        class="application-item"
      >
        <div class="item-header">
          <span class="points-name">{{ item.pointsName }}</span>
          <span class="status-badge" :class="getStatusClass(item.approvalStatus)">
            {{ getStatusText(item.approvalStatus) }}
          </span>
        </div>
        <div class="item-content">
          <div class="info-row">
            <span class="label">申请人：</span>
            <span>{{ item.personName }}</span>
          </div>
          <div class="info-row">
            <span class="label">积分数量：</span>
            <span class="points-num">+{{ item.pointsNum }}</span>
          </div>
          <div class="info-row">
            <span class="label">描述：</span>
            <span>{{ item.description }}</span>
          </div>
          <div class="info-row">
            <span class="label">申请时间：</span>
            <span>{{ formatTime(item.createdTime) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="!applicationList.length && !loading" class="empty-state">
      <van-empty description="暂无申请记录" />
    </div>

    <!-- 添加按钮 -->
    <div class="add-btn" @click="goToAdd">
      <text class="btn-text">申请积分</text>
      <text class="iconfont">+</text>
    </div>
  </div>
</template>

<script>
import request from '@/utils/http'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'PointsApplication',
  data() {
    return {
      applicationList: [],
      loading: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  onLoad() {
    this.getList()
    // 监听刷新事件
    uni.$on('refreshPointsApplicationList', this.handleRefresh)
  },
  onUnload() {
    // 移除事件监听
    uni.$off('refreshPointsApplicationList', this.handleRefresh)
  },
  onShow() {
    // 页面显示时也刷新一次，确保数据最新
    this.getList()
  },
  onPullDownRefresh() {
    this.getList().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    async getList() {
      try {
        this.loading = true
        this.$showLoading('加载中...')
        const res = await request({
          url: '/tbPointsApplication/list',
          method: 'post',
          data: {
            phone: this.userInfo.userId,
            userId: this.userInfo.userId
          }
        })
        this.$hideLoading()
        this.loading = false

        if (res.code === '0') {
          this.applicationList = res.data || []
        }
      } catch (error) {
        this.$hideLoading()
        this.loading = false
        console.error('获取积分申请列表失败:', error)
      }
    },
    
    getStatusText(status) {
      const statusMap = {
        0: '未通过',
        1: '已通过',
        null: '审核中',
        undefined: '审核中'
      }
      return statusMap[status] || '审核中'
    },
    
    getStatusClass(status) {
      const classMap = {
        0: 'status-reject',
        1: 'status-pass',
        null: 'status-pending',
        undefined: 'status-pending'
      }
      return classMap[status] || 'status-pending'
    },
    
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm')
    },
    
    goToAdd() {
      this.$toPage('/pages/jfsq/add')
    },

    handleRefresh() {
      // 处理刷新事件
      this.getList()
    }
  }
}
</script>

<style scoped>
.points-application-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.application-list {
  margin-bottom: 120rpx;
}

.application-item {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.points-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
  line-height: 1.4;
}

.status-badge {
  width: 120rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: white;
  text-align: center;
  flex-shrink: 0;
}

.status-pass {
  background-color: #52c41a;
}

.status-reject {
  background-color: #ff4d4f;
}

.status-pending {
  background-color: #faad14;
}

.item-content {
  font-size: 28rpx;
}

.info-row {
  display: flex;
  margin-bottom: 12rpx;
  color: #666;
}

.label {
  min-width: 140rpx;
  color: #999;
}

.points-num {
  color: #52c41a;
  font-weight: bold;
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #1890ff, #096dd9);
  border-radius: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(24, 144, 255, 0.3);
}

.btn-text {
  color: white;
  font-size: 20rpx;
  margin-bottom: 4rpx;
}

.iconfont {
  color: white;
  font-size: 40rpx;
  font-weight: bold;
}
</style>